<template>

  <div style="width: 960px;height: 600px;border-radius: 20px;background-color: wheat;margin: 50px auto auto;">
    <div style="width: 60px;height: 590px;background-color: #070505;float: left;padding-top: 10px">
      <el-avatar  @click.native="dialogVisible2 = true" style="float: left;margin-left: 12px" shape="square" size="medium" :src="headerPic"></el-avatar>
      <span v-if="clickIcon!='chat_info'" @click="changeSelect('chat_info')" >
      <img  style="margin-top: 10px"  src="../assets/chat.png">
      </span>
      <span v-if="clickIcon=='chat_info'" style="margin-top: 10px">
       <img  style="margin-top: 10px" src="../assets/chatClick.png">
      </span>
      <span v-if="clickIcon!='contact'" @click="changeSelect('contact')" style="margin-top: 10px">
       <img   style="margin-top: 10px" src="../assets/contact.png">
      </span>
      <span v-if="clickIcon=='contact'" style="margin-top: 10px">
      <img  style="margin-top: 10px" src="../assets/contactclick.png">
      </span>
      <span v-if="clickIcon!='groupChat'" @click="changeSelect('groupChat')">
        <svg style="margin-top: 10px" t="1623132719120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="787" width="32" height="32"><path d="M99.7 465.3c-30 33.7-59.8 86-63.6 138.3-14.9 89.8 56.1 175.8 153.4 228.2 7.5 30-26.1 82.2-26.1 82.2-14.9 7.5 7.5 7.5 7.5 7.5 52.4 0 112.2-44.9 142.1-67.3 78.5 7.5 149.7-11.2 209.5-44.9-228.3-11.2-422.8-164.5-422.8-344z" p-id="788" fill="#ffffff"></path><path d="M989.9 450.2c0-190.7-190.7-347.8-433.8-347.8S122.2 255.8 122.2 450.2c0 183.3 190.7 340.4 426.3 340.4 37.4 37.4 145.9 115.9 228.2 115.9 0 0 37.4 7.5 22.4-14.9 0 0-67.3-82.2-52.4-130.9C892.6 700.9 989.9 585 989.9 450.2z m-590 120c-12.8 0-24-1.3-33.5-4s-17.6-6.2-24.1-10.5c-6.6-4.4-11.5-9.3-14.8-14.8-3.3-5.5-4.9-11-4.9-16.6 0-6.6 3.4-11.9 10.3-15.9 6.9-4.1 14.5-7.8 22.7-11.3 8.3-3.4 15.9-7 22.7-10.8 6.9-3.8 10.3-8.6 10.3-14.5s-1.9-11.4-5.6-16.4c-3.8-5-7.9-10.7-12.4-17.1-4.5-6.4-8.7-13.9-12.4-22.5-3.8-8.6-5.6-19.6-5.6-33.1 0-9.7 1-19.1 3-28.1s5.1-17 9.1-23.9c4.1-6.9 9.2-12.3 15.5-16.4 6.3-4.1 13.6-6.1 22-6.1 11.3 0 20.6 1.9 28.1 5.6-1.9 11.3-2.8 23-2.8 35.2 0 19.7 1.6 36.4 4.9 50.2 3.3 13.8 7.4 25.6 12.4 35.6-4.7 6.3-9.1 12.1-13.1 17.6-4.1 5.5-6.1 12-6.1 19.5 0 4.1 2.2 7.6 6.6 10.5 4.4 3 9.6 5.8 15.7 8.4 6.1 2.7 12.6 5.4 19.5 8.2 6.9 2.8 13 5.8 18.3 8.9 0.3 1.6 0.5 4.1 0.5 7.5 0 5.9-2.6 10.8-7.7 14.5s-11.6 7.3-19.5 10.8c-7.8 3.4-16.3 7.3-25.3 11.7s-17.3 10.3-24.8 17.8h-9zM692 630.9c-8.8 4.8-20.3 9.3-34.7 13.4-14.4 4.1-30.9 7.3-49.7 9.6-18.8 2.3-38 3.5-57.7 3.5-22.5 0-42.4-1.2-59.8-3.5s-31.9-5.5-43.6-9.4c-11.7-3.9-20.6-8.4-26.7-13.4s-9.1-10-9.1-15c0-7.8 2.9-14.6 8.7-20.4 5.8-5.8 13-11 21.8-15.7 8.8-4.7 18.2-9 28.4-12.9 10.2-3.9 19.6-8 28.4-12.4 8.8-4.4 16-9.1 21.8-14.3 5.8-5.2 8.7-11.3 8.7-18.5S527 508 524 501.7c-3-6.3-6.7-12.6-11.3-19-4.5-6.4-9.5-13.4-14.8-20.9-5.3-7.5-10.2-15.9-14.8-25.3s-8.3-20.2-11.3-32.4-4.5-26.3-4.5-42.2c0-34.7 6.5-62.3 19.5-82.8s33.1-30.7 60.2-30.7c22.8 0 40.8 3.4 53.9 10.3 13.1 6.9 23.1 15.7 29.8 26.5 6.7 10.8 10.9 22.7 12.7 35.6 1.7 13 2.6 25.7 2.6 38.2 0 16.9-1.5 31.4-4.5 43.6-3 12.2-6.6 22.8-11 31.9-4.4 9.1-9.1 17.1-14.1 24.1s-9.7 13.8-14.1 20.2c-4.4 6.4-8 13-11 19.7-3 6.7-4.5 14.3-4.5 22.7 0 6.6 2.9 12.3 8.7 17.3 5.8 5 13 9.8 21.8 14.3s18.3 8.8 28.6 12.9 19.8 8.5 28.6 13.4c8.8 4.8 16 10.2 21.8 15.9s8.7 12.6 8.7 20.4c0.1 5.6-4.2 10.7-13 15.5z m46.7-66.8c-10.2 1.9-20.6 3-31.2 3.3-8.8-5.9-18.1-10.5-28.1-13.8-10-3.3-19.5-6.3-28.4-8.9-8.9-2.7-16.6-5.6-23-8.9-6.4-3.3-10.2-8-11.5-14.3 1.3-5.9 5.3-10.8 12.2-14.5 6.9-3.8 14.3-7.3 22.3-10.5 8-3.3 15.2-6.8 21.6-10.5 6.4-3.8 9.6-8.4 9.6-14.1 0-6.6-2.5-12.6-7.5-18.1-5-5.5-10.2-11.8-15.5-19 5-10.9 9.1-23.9 12.4-38.9 3.3-15 4.9-32.7 4.9-53 0-4.4-0.2-8.8-0.7-13.1-0.5-4.4-1-8.8-1.6-13.1 8.1-5.6 15.5-8.4 22-8.4 14.7 0 26.4 2.4 35.2 7.3 8.8 4.8 15.4 10.9 19.9 18.1s7.5 14.9 8.9 23.2c1.4 8.3 2.1 15.9 2.1 22.7 0 14.1-2.3 25.4-6.8 34-4.5 8.6-9.5 16-15 22.3s-10.5 12-15 17.3c-4.5 5.3-6.8 11.6-6.8 18.8 0 3.4 1.8 6.6 5.4 9.4 3.6 2.8 8 5.5 13.4 8 5.3 2.5 11.2 4.9 17.6 7.3 6.4 2.3 12.3 4.8 17.6 7.5 5.3 2.7 9.8 5.6 13.4 8.9 3.6 3.3 5.4 7.1 5.4 11.5 0 6.9-2.3 13-7 18.3-4.7 5.3-10.9 9.8-18.8 13.4-7.9 3.2-16.9 5.9-27 7.8z" p-id="789" fill="#ffffff"></path></svg>
      </span>
      <span v-if="clickIcon=='groupChat'">
        <svg style="margin-top: 10px" t="1623132719120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="787" width="32" height="32"><path d="M99.7 465.3c-30 33.7-59.8 86-63.6 138.3-14.9 89.8 56.1 175.8 153.4 228.2 7.5 30-26.1 82.2-26.1 82.2-14.9 7.5 7.5 7.5 7.5 7.5 52.4 0 112.2-44.9 142.1-67.3 78.5 7.5 149.7-11.2 209.5-44.9-228.3-11.2-422.8-164.5-422.8-344z" p-id="788" fill="#1afa29"></path><path d="M989.9 450.2c0-190.7-190.7-347.8-433.8-347.8S122.2 255.8 122.2 450.2c0 183.3 190.7 340.4 426.3 340.4 37.4 37.4 145.9 115.9 228.2 115.9 0 0 37.4 7.5 22.4-14.9 0 0-67.3-82.2-52.4-130.9C892.6 700.9 989.9 585 989.9 450.2z m-590 120c-12.8 0-24-1.3-33.5-4s-17.6-6.2-24.1-10.5c-6.6-4.4-11.5-9.3-14.8-14.8-3.3-5.5-4.9-11-4.9-16.6 0-6.6 3.4-11.9 10.3-15.9 6.9-4.1 14.5-7.8 22.7-11.3 8.3-3.4 15.9-7 22.7-10.8 6.9-3.8 10.3-8.6 10.3-14.5s-1.9-11.4-5.6-16.4c-3.8-5-7.9-10.7-12.4-17.1-4.5-6.4-8.7-13.9-12.4-22.5-3.8-8.6-5.6-19.6-5.6-33.1 0-9.7 1-19.1 3-28.1s5.1-17 9.1-23.9c4.1-6.9 9.2-12.3 15.5-16.4 6.3-4.1 13.6-6.1 22-6.1 11.3 0 20.6 1.9 28.1 5.6-1.9 11.3-2.8 23-2.8 35.2 0 19.7 1.6 36.4 4.9 50.2 3.3 13.8 7.4 25.6 12.4 35.6-4.7 6.3-9.1 12.1-13.1 17.6-4.1 5.5-6.1 12-6.1 19.5 0 4.1 2.2 7.6 6.6 10.5 4.4 3 9.6 5.8 15.7 8.4 6.1 2.7 12.6 5.4 19.5 8.2 6.9 2.8 13 5.8 18.3 8.9 0.3 1.6 0.5 4.1 0.5 7.5 0 5.9-2.6 10.8-7.7 14.5s-11.6 7.3-19.5 10.8c-7.8 3.4-16.3 7.3-25.3 11.7s-17.3 10.3-24.8 17.8h-9zM692 630.9c-8.8 4.8-20.3 9.3-34.7 13.4-14.4 4.1-30.9 7.3-49.7 9.6-18.8 2.3-38 3.5-57.7 3.5-22.5 0-42.4-1.2-59.8-3.5s-31.9-5.5-43.6-9.4c-11.7-3.9-20.6-8.4-26.7-13.4s-9.1-10-9.1-15c0-7.8 2.9-14.6 8.7-20.4 5.8-5.8 13-11 21.8-15.7 8.8-4.7 18.2-9 28.4-12.9 10.2-3.9 19.6-8 28.4-12.4 8.8-4.4 16-9.1 21.8-14.3 5.8-5.2 8.7-11.3 8.7-18.5S527 508 524 501.7c-3-6.3-6.7-12.6-11.3-19-4.5-6.4-9.5-13.4-14.8-20.9-5.3-7.5-10.2-15.9-14.8-25.3s-8.3-20.2-11.3-32.4-4.5-26.3-4.5-42.2c0-34.7 6.5-62.3 19.5-82.8s33.1-30.7 60.2-30.7c22.8 0 40.8 3.4 53.9 10.3 13.1 6.9 23.1 15.7 29.8 26.5 6.7 10.8 10.9 22.7 12.7 35.6 1.7 13 2.6 25.7 2.6 38.2 0 16.9-1.5 31.4-4.5 43.6-3 12.2-6.6 22.8-11 31.9-4.4 9.1-9.1 17.1-14.1 24.1s-9.7 13.8-14.1 20.2c-4.4 6.4-8 13-11 19.7-3 6.7-4.5 14.3-4.5 22.7 0 6.6 2.9 12.3 8.7 17.3 5.8 5 13 9.8 21.8 14.3s18.3 8.8 28.6 12.9 19.8 8.5 28.6 13.4c8.8 4.8 16 10.2 21.8 15.9s8.7 12.6 8.7 20.4c0.1 5.6-4.2 10.7-13 15.5z m46.7-66.8c-10.2 1.9-20.6 3-31.2 3.3-8.8-5.9-18.1-10.5-28.1-13.8-10-3.3-19.5-6.3-28.4-8.9-8.9-2.7-16.6-5.6-23-8.9-6.4-3.3-10.2-8-11.5-14.3 1.3-5.9 5.3-10.8 12.2-14.5 6.9-3.8 14.3-7.3 22.3-10.5 8-3.3 15.2-6.8 21.6-10.5 6.4-3.8 9.6-8.4 9.6-14.1 0-6.6-2.5-12.6-7.5-18.1-5-5.5-10.2-11.8-15.5-19 5-10.9 9.1-23.9 12.4-38.9 3.3-15 4.9-32.7 4.9-53 0-4.4-0.2-8.8-0.7-13.1-0.5-4.4-1-8.8-1.6-13.1 8.1-5.6 15.5-8.4 22-8.4 14.7 0 26.4 2.4 35.2 7.3 8.8 4.8 15.4 10.9 19.9 18.1s7.5 14.9 8.9 23.2c1.4 8.3 2.1 15.9 2.1 22.7 0 14.1-2.3 25.4-6.8 34-4.5 8.6-9.5 16-15 22.3s-10.5 12-15 17.3c-4.5 5.3-6.8 11.6-6.8 18.8 0 3.4 1.8 6.6 5.4 9.4 3.6 2.8 8 5.5 13.4 8 5.3 2.5 11.2 4.9 17.6 7.3 6.4 2.3 12.3 4.8 17.6 7.5 5.3 2.7 9.8 5.6 13.4 8.9 3.6 3.3 5.4 7.1 5.4 11.5 0 6.9-2.3 13-7 18.3-4.7 5.3-10.9 9.8-18.8 13.4-7.9 3.2-16.9 5.9-27 7.8z" p-id="789" fill="#1afa29"></path></svg>
      </span>
      <span>
        <svg  @click="addUserDialog=true" style="margin-top: 320px;cursor: pointer" t="1623214298646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="783" width="32" height="32"><path d="M835.328 588.8c19.456 0 35.584 14.4896 38.144 33.28l0.3584 5.2224v108.1856h108.1856a38.5024 38.5024 0 0 1 5.2224 76.6464l-5.2224 0.3584h-108.1856v108.1856a38.5024 38.5024 0 0 1-76.6464 5.2224l-0.3584-5.2224V812.544H688.64a38.5024 38.5024 0 0 1-5.2224-76.6464l5.2224-0.3584h108.1856v-108.1856c0-21.248 17.2544-38.5024 38.5024-38.5024z" p-id="784" fill="#bfbfbf"></path><path d="M367.4112 153.6c142.336 2.8672 161.0752 99.328 141.7728 202.8544-5.5808 29.7984-20.48 66.7136-44.5952 110.7456l-8.3968 14.9504a72.0896 72.0896 0 0 0 26.5216 98.4064l3.328 1.792 3.3792 1.6384c23.04 10.24 151.4496 30.3104 175.9744 70.2464l1.9968 6.4 5.6832-0.8704a115.3024 115.3024 0 0 0-99.7376 114.2272l0.256 7.8848c1.024 15.2064 5.0176 29.6448 11.3664 42.6496H51.2a22.784 22.784 0 0 1-22.784-22.784v-1.3312l0.1536-1.3312c8.0896-65.5872 17.4592-113.8688 28.16-144.8448 24.5248-39.936 152.9344-60.0576 175.9232-70.2464 7.1168-3.1744 18.0224-18.3808 32.768-45.568l4.608-8.5504a51.2 51.2 0 0 0-0.3072-48.0768C242.176 430.592 225.28 388.7104 219.2896 356.4544l-2.048-11.4688-2.304-17.0496c-10.24-90.112 15.872-168.448 138.2912-174.0288L367.4112 153.6z m351.232 67.072c120.9856 2.4576 136.96 84.48 120.5248 172.4416-4.6592 25.0368-17.0496 55.9616-37.1712 92.7744l-7.8848 14.0288a61.0816 61.0816 0 0 0-7.68 22.9376 115.2512 115.2512 0 0 0-66.4064 104.448l-0.0512 31.3856h-1.024l-1.8432-7.168-2.816-9.5232-3.1232-9.3696-2.9184-4.7104-3.6864-5.5296c-16.896-23.7056-44.544-39.424-84.8896-53.504 2.9184-4.5056 6.1952-10.0352 9.7792-16.4864l4.352-7.9872a51.2 51.2 0 0 0 0-48.128c-22.3744-42.0864-36.0448-76.4416-41.0624-103.168l-1.6896-9.728c-13.1072-82.5856 4.9664-157.44 115.5584-162.4064l8.0384-0.256h3.9936z" p-id="785" fill="#bfbfbf"></path></svg>
      </span>
      <span >
        <svg style="margin-top: 10px;cursor: pointer" t="1623214468780" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2084" width="32" height="32"><path d="M55.807554 0h1117.175062c30.719754 0 55.807554 24.166207 55.807554 53.861969v53.964368c0 14.335885-5.836753 27.954976-16.383869 38.092496a56.933945 56.933945 0 0 1-39.423685 15.769473H55.807554A54.885961 54.885961 0 0 1 0 107.826337V53.861969C0 24.166207 24.9854 0 55.807554 0z m0 431.100551h1117.175062c30.719754 0 55.807554 24.166207 55.807554 53.964368v53.86197c0 29.695762-24.9854 53.861969-55.807554 53.861969H55.807554A54.885961 54.885961 0 0 1 0 538.926889v-53.86197c0-29.695762 24.9854-53.861969 55.807554-53.861969z m0 431.202951h1117.175062c30.719754 0 55.807554 24.166207 55.807554 53.861969v53.964368c0 29.695762-24.9854 53.861969-55.807554 53.861969H55.807554A54.885961 54.885961 0 0 1 0 970.129839v-53.964368c0-29.695762 24.9854-53.861969 55.807554-53.861969z" p-id="2085" fill="#bfbfbf"></path></svg>
      </span>
    </div>


<!--    //中间的box-->
    <div style="width: 180px;height: 600px;float: left;background-color: #e3e1e1">
      <div class="chatBox_header">
      <el-input
        style="width: 140px!important;float: left;margin-right: 5px"
        placeholder="请输入内容"
        @keyup.enter.native="addFriend"
        prefix-icon="el-icon-search"
        v-model="searchInfo">
      </el-input>
        <svg @click="addFriend()" t="1623120747902" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1200" width="26" height="26"><path d="M904.704 763.392h-276.48c-10.752 0-19.456-8.704-19.456-19.456 0-10.752 8.704-19.456 19.456-19.456h276.48c10.752 0 19.456 8.704 19.456 19.456 0 10.752-8.704 19.456-19.456 19.456z" fill="#8a8a8a" p-id="1201"></path><path d="M766.464 901.632c-10.752 0-19.456-8.704-19.456-19.456v-276.48c0-10.752 8.704-19.456 19.456-19.456s19.456 8.704 19.456 19.456v276.48c0 10.752-8.704 19.456-19.456 19.456zM498.688 526.336c-112.64 0-204.288-91.648-204.288-204.288S386.048 117.76 498.688 117.76s204.288 91.648 204.288 204.288-91.648 204.288-204.288 204.288z m0-369.664c-91.136 0-165.376 74.24-165.376 165.376 0 91.136 74.24 165.376 165.376 165.376 91.136 0 165.376-74.24 165.376-165.376 0-91.136-74.24-165.376-165.376-165.376z" fill="#8a8a8a" p-id="1202"></path><path d="M121.856 894.464c-10.752 0-19.456-8.704-19.456-19.456 0-210.944 171.52-382.976 382.976-382.976 81.92 0 159.744 25.6 225.792 73.728 8.704 6.144 10.752 18.432 4.096 27.136a19.0464 19.0464 0 0 1-27.136 4.096c-59.392-43.52-129.536-66.048-202.752-66.048-189.44 0-343.552 154.112-343.552 343.552-0.512 11.264-9.216 19.968-19.968 19.968z" fill="#8a8a8a" p-id="1203"></path></svg>
        <el-dialog
          :visible.sync="addUserDialog"
          title="创建群聊"
          width="30%"
          >
          <el-checkbox-group v-model="checkedUsers">
            <el-checkbox v-for="(user,index) in friendList" :label="user.userId" :key="index">{{user.userName}}</el-checkbox>
          </el-checkbox-group>

          <span slot="footer" class="dialog-footer">
             <el-input placeholder="请输入群聊名" style="margin-bottom: 10px" @keyup.enter.native="createGroup()"  v-model="createGroupChatName"></el-input>
         <el-button type="primary" @click="createGroup()">创建群聊</el-button>
         </span>
        </el-dialog>

      </div>
<!--      //所有好友-->
        <ul v-if="clickIcon=='contact'" id="userList" style="list-style: none;height: 550px;padding: 0px;margin: 20px 0px 0px;overflow-y: scroll">
        <li :class="{'active':user.userId==selectedUser.userId}" style="margin: 0px;cursor: pointer" v-for="user in friendListMap.values()" @click="selectUser(user)">
          <el-avatar style="float: left" shape="square" size="medium" :src="$store.getters.getAvatarBaseUrl+user.avatarPath"></el-avatar>
          <span style="float: left;margin-left: 7px">{{user.userName}}</span>
          <el-badge style="float: left"  v-if="user.unreadNum!=0" :value="user.unreadNum" :max="99" class="item">
          </el-badge>
        </li>
      </ul>
<!--      //所有群聊-->
      <ul v-if="clickIcon=='groupChat'" id="groupList" style="list-style: none;height: 550px;padding: 0px;margin: 20px 0px 0px;width: 180px;overflow-y: scroll">
        <li :class="{'active':group.eid==selectedGroup.eid}" style="margin: 0px;cursor: pointer;height: 40px;background-color: white" v-for="group in groupChatList" @click="selectGroup(group)">
          <el-avatar style="float: left" shape="square" size="medium" :src="headerPic"></el-avatar>
          <span style="float: left;margin-left: 7px">{{group.groupName}}</span>
          <div  v-if="group.lord==currentUser.userId" style="width: 10px;height: 10px;background-color: green;float: right;border-radius: 10px"></div>
        </li>
      </ul>


      <!--      //所有待处理-->
      <ul v-if="clickIcon=='chat_info'" id="infoList" style="list-style: none;height: 550px;padding: 0px;margin: 20px 0px 0px;width: 180px;overflow-y: scroll">
        <li style="margin: 0px;cursor: pointer;height: 55px;background-color: white" v-for="reqRecord in reqRecordList" >
          <div style="max-width:94px;width: auto;height: 50px;font-size: 12px;float: left;overflow: hidden;padding-top: 4px">{{reqRecord.fromUser+":"+reqRecord.content}}
          </div>
          <div style="width: 64px;float: right;margin-top: 10px">
            <el-button @click="handelRequest('agree',reqRecord)" style="float: left" type="text" size="mini">同意</el-button>
            <el-button @click="handelRequest('refuse',reqRecord)" style="float: left" type="text" size="mini">拒绝</el-button>
          </div>
        </li>
      </ul>

    </div>


<!--    //右侧消息框-->
    <div style="width: 720px;height: 600px;float: right;background-color: #eceaea">
      <div v-if="selectedUser.userName==undefined && selectedGroup.groupName==undefined" style="width: 220px;height: 200px;margin: 188px auto auto;">
        <svg t="1623124103042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1268" width="200" height="200"><path d="M707.456 391.872C675.136 246.976 530.496 137.6 357.12 137.6 159.936 137.6 0 278.976 0 453.376c0 84.096 37.184 160.448 97.792 216.96 18.688 17.664 19.52 47.168 1.792 65.792l-28.672 30.144s271.36 2.944 286.272 2.944c69.12 0 133.632-17.408 188.288-47.488 101.376-55.68 168.832-155.072 168.832-268.416-0.064-20.992-2.368-41.536-6.848-61.44zM185.984 509.44c-31.04 0-56.064-25.024-56.064-56.064 0-30.976 25.024-56.064 56.064-56.064 30.976 0 56.064 25.088 56.064 56.064 0 31.04-25.088 56.064-56.064 56.064z m171.136 0c-30.976 0-56.064-25.024-56.064-56.064 0-30.976 25.088-56.064 56.064-56.064s56.064 25.088 56.064 56.064c0 31.04-25.088 56.064-56.064 56.064z m173.184-0.064c-0.704 0.064-1.344 0.064-2.048 0.064-30.976 0-56.064-25.024-56.064-56.064 0-30.976 25.088-56.064 56.064-56.064 28.48 0 51.968 21.184 55.552 48.64 0.32 2.496 0.512 4.928 0.512 7.488a55.776 55.776 0 0 1-54.016 55.936z" fill="#666666" p-id="1269"></path><path d="M956.096 809.216l19.584 20.544h-159.296c-1.92 0-3.84 0.128-5.76 0.32-9.856 1.088-19.84 1.728-30.016 1.728-85.184 0-160.192-38.72-203.584-97.344 101.376-55.68 168.832-155.072 168.832-268.416 0-21.056-2.368-41.6-6.848-61.504 13.504-2.112 27.456-3.136 41.6-3.136 134.4 0 243.328 96.32 243.328 215.168 0 57.28-25.344 109.312-66.624 147.84-12.672 11.968-13.184 32.064-1.216 44.8z" fill="#666666" p-id="1270"></path></svg>
      </div>

<!--      单聊-->
      <div id="chatBox" v-if="selectedUser.userName!=undefined">
      <div style="width: 720px;height: 50px;text-align: center;border-bottom: #848484 solid 1px">
        <strong style="line-height: 45px;margin-bottom: 20px">{{selectedUser.userName}}</strong>
      </div>
<!--        //展示消息内容-->
      <div id="show_infos" style="width: 720px;height: 490px;overflow-y: scroll;padding-top: 20px" updated>
        <div v-for="message in friendMessageMap.get(selectedUser.userId)">
          <div v-if="selectedUser.userId==message.fromUser" class="chat-sender">
            <div><img :src="$store.getters.getAvatarBaseUrl+selectedUser.avatarPath"></div>
            <div>{{getName(message.fromUser)}}</div>
            <div style="width: auto;max-width: 200px;min-width: 0px">
              <div class="chat-left_triangle"></div>
              <span>{{message.msg}}</span>
            </div>
          </div>
<!--          <div class="chat-notice">-->
<!--            <span>2017年12月10日 23:13</span>-->
<!--          </div>-->
          <!-- Right -->
          <div  v-if="currentUser.userId!=message.toUser" class="chat-receiver">
            <div><img :src="$store.getters.getAvatarBaseUrl+currentUser.avatarPath"></div>
            <div>{{currentUser.userName}}</div>
            <div style="width: auto;max-width: 200px">
              <div class="chat-right_triangle"></div>
              <span>{{message.msg}}</span>
            </div>
          </div>
        </div>
      </div>
      <el-input @keyup.enter.native="sendMessage(1)" style="width: 645px" v-model="messageValue"></el-input>
      <el-button  @click="sendMessage(1)">发送</el-button>
      </div>


<!--      群聊消息框-->
      <div id="groupBox" v-if="selectedGroup.groupName!=undefined" >
        <div  style="width: 720px;height: 50px;text-align: center;border-bottom: #848484 solid 1px;float: left">
          <strong style="line-height: 45px;margin-bottom: 20px">{{selectedGroup.groupName}}</strong>
        </div>
        <!--        //展示消息内容-->
        <div  id="groupChatInfo" style="width: 520px;height: 490px;overflow-y: scroll;padding-top: 20px;float: left" updated>
          <div v-for="message in selectedGroup.messages">
            <div v-if="message.fromUser!=currentUser.userId" class="chat-sender">
              <div><img :src="$store.getters.getAvatarBaseUrl+getUserInGroup(selectedGroup.userList,message.fromUser).avatarPath"></div>
              <div>{{getUserInGroup(selectedGroup.userList,message.fromUser).userName}}</div>
              <div style="width: auto;max-width: 200px;min-width: 0px">
                <div class="chat-left_triangle"></div>
                <span>{{message.msg}}</span>
              </div>
            </div>
            <!--          <div class="chat-notice">-->
            <!--            <span>2017年12月10日 23:13</span>-->
            <!--          </div>-->
            <!-- Right -->
            <div  v-if="message.fromUser==currentUser.userId" class="chat-receiver">
              <div><img :src="$store.getters.getAvatarBaseUrl+currentUser.avatarPath"></div>
              <div>{{currentUser.userName}}</div>
              <div style="width: auto;max-width: 200px">
                <div class="chat-right_triangle"></div>
                <span>{{message.msg}}</span>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 200px;height: 490px;float: left">
          <div style="width: 200px;height: 32px">
            <strong>群内用户</strong>
            <svg @click="inviteFriendsDialog=true" style="float: right;margin-right: 20px;cursor: pointer" t="1623408366791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1198" width="32" height="32"><path d="M511.7 139.1C305.3 139.1 138 306.4 138 512.8s167.3 373.7 373.7 373.7 373.7-167.3 373.7-373.7-167.3-373.7-373.7-373.7z m0 683.4C340.9 822.5 202 683.6 202 512.8c0-170.8 138.9-309.7 309.7-309.7 170.8 0 309.7 138.9 309.7 309.7 0 170.8-138.9 309.7-309.7 309.7z" fill="#515151" p-id="1199"></path><path d="M543.7 319.4h-64v161.4H318.3v64h161.4v161.5h64V544.8h161.5v-64H543.7z" fill="#515151" p-id="1200"></path></svg>
            <el-dialog
              :visible.sync="inviteFriendsDialog"
              title="邀请新好友"
              width="30%"
            >
              <el-checkbox-group v-model="inviteFriendsList">
                <el-checkbox v-for="(user,index) in friendList" v-if="!isInGroup(user,selectedGroup.userList)" :label="user.userId" :key="index">{{user.userName}}</el-checkbox>
              </el-checkbox-group>

              <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="inviteFriendsGroups()">邀请好友</el-button>
         </span>
            </el-dialog>
          </div>
          <ul   style="list-style: none;height: 550px;padding: 0px;margin: 20px 0px 0px;">
            <li style="margin: 0px;cursor: pointer;width: 180px;height: 40px" v-for="user in selectedGroup.userList">
              <el-avatar style="float: left" shape="square" size="medium" :src="$store.getters.getAvatarBaseUrl+user.avatarPath"></el-avatar>
              <span style="float: left;margin-left: 7px">{{user.userName}}</span>
              <el-badge style="float: left"  v-if="user.unreadNum!=0" :value="user.unreadNum" :max="99" class="item">
              </el-badge>
            </li>
          </ul>
        </div>
        <el-input @keyup.enter.native="sendMessage(0)" style="width: 645px" v-model="messageValue"></el-input>

        <el-button @click="sendMessage(0)">发送</el-button>
      </div>
    </div>

    <el-dialog title="上传头像"
               :visible.sync="dialogVisible2"
               width="30%">
      <el-form id="changeInfo" :model="upLoadUser" status-icon :rules="rules" ref="uploadForm" label-width="100px" class="demo-ruleForm">
        <el-form-item>
          <el-upload
            ref="upload"
            action="#"
            :auto-upload="false"
            :on-preview="handleBeforeUpload"
            :on-change="handleChange"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <el-avatar  @click.native="dialogVisible2 = true" shape="square" size="medium" :src="headerPic"></el-avatar>
          </el-upload>
        </el-form-item>


          <el-form-item label="用户ID" prop="userId">
            <el-input type="text" disabled v-model="upLoadUser.userId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input type="text" v-model="upLoadUser.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="upLoadUser.birthday"
              align="right"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('uploadForm')">提交</el-button>
          </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import http from '../utils/http'
  import {getFriends} from '@/api/user'
  import messageList from './messageList'
  export default {
    //添加update方法：
    updated : function(){
      this.$nextTick(function(){
        var div = document.getElementById('show_infos');
        var test=document.getElementById('groupChatInfo');
        if(div!=null) {
          div.scrollTop = div.scrollHeight;
        }
        if(test!=null) {
          test.scrollTop = test.scrollHeight;
        }
      })
    },
    components:{
      messageList,
    },
    data () {
      var check = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        }
        return callback();
      };

      return {
        clickIcon:'chat_info',
        headerPic: '',
        websocket: null, // WebSocket对象
        messageValue: '', // 消息内容
        friendList: [], //用户信息

        selectedUser: {},
        selectedGroup:{},
        currentUser: this.$store.getters.getUser,
        friendMessageMap:new Map(),
        friendListMap:new Map(),
        searchInfo:'',
        //所有群聊
        groupChatList:[],
        //添加好友弹唱窗口
        addUserDialog:false,
        checkedUsers:[],
        createGroupChatName:'',
        reqRecordList:[],

        dialogVisible2: false,//弹窗
        dialogVisible: false,
        file:{},
        inviteFriendsDialog:false,
        inviteFriendsList:[],
        upLoadUser:this.$store.getters.getUser,
        rules: {
          userName: [
            {validator: check, trigger: 'blur'}
          ],
          userId: [
            {validator: check, trigger: 'blur'}
          ],
          birthday: [
            {validator: check, trigger: 'blur'}
          ]
        },
      }
    },
    created () {
      this.connectWebSocket();
      this.getFriends();
      this.getAllReqRecord();
      this.headerPic=this.$store.getters.getAvatarBaseUrl+this.currentUser.avatarPath
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            http.post('/user/updateUser',this.upLoadUser).then((res)=>{
              if(res.data.code == 200) {
                this.currentUser = this.upLoadUser
                this.uploadFile();
                this.dialogVisible2=false
                this.$message.success(res.data.message)
              }else{
                this.$message.error(res.data.message)
              }
            })

          } else {
            return false;
          }
        });
      },
      selectUser (user) {
        this.selectedUser = user
        // if (this.friendMessageMap.get(user.userId).length == 0) {
          http.get('/message/getMessageList', {
            userId: this.currentUser.userId,
            friendId: this.selectedUser.userId,
          }).then((res) => {
            //查询出所有朋友与当前联系人的聊天消息
            this.friendMessageMap.set(this.selectedUser.userId, res.data)
            this.$forceUpdate()
          })
        // }
        if (this.friendListMap.get(user.userId).unreadNum != 0) {
          http.get('/message/readInfo', {
            userId: this.currentUser.userId,
            friendId: this.selectedUser.userId,
          }).then((res) => {
            //未读消息清空
            this.friendListMap.get(user.userId).unreadNum = 0
            this.$forceUpdate()
          })
        }
        this.selectedGroup = {}
      },
      getFriends () {
        getFriends({
          userId: this.currentUser.userId
        }).then((res) => {
          this.friendList = res.data
          for (var i = 0; i < res.data.length; i++) {
            this.friendListMap.set(res.data[i].userId, res.data[i])
            this.friendMessageMap.set(res.data[i].userId, [])
          }
          this.$forceUpdate()
        })
      },
      connectWebSocket () {

        if ('WebSocket' in window) {
          this.websocket = new WebSocket(
            // 'ws://localhost:8080/websocket/' + this.currentUser.userName + '/' + this.currentUser.userId
            //打包用
            'ws://8.136.254.73:8080/websocket/' + this.currentUser.userName + '/' + this.currentUser.userId
          )
        } else {
          alert('不支持建立socket连接')
        }
        //连接发生错误的回调方法
        this.websocket.onerror = function () {

        }
        //连接成功建立的回调方法
        this.websocket.onopen = function (event) {

        }
        //接收到消息的回调方法
        var that = this
        this.websocket.onmessage = function (event) {
          var object = eval('(' + event.data + ')')
          if (object.type == 0) {
            // 提示连接成功
            if(object.name!=that.currentUser.userName){
              that.$message.success("你的好友"+object.name+"上线了，快去找他(她)聊天吧！")
            }else{
              that.$message.success("你已经上线，可以跟朋友聊天了")
            }
          }
          if (object.type == 1) {
            //显示消息
            let message = {
              fromUser: object.id,
              toUser: that.currentUser.userId,
              msg: object.msg,
              date: new Date()
            }
            if (that.selectedUser.userId == object.id) {
              message.status = "已读"
            } else {
              message.status = "未读"
            }
            that.friendMessageMap.get(message.fromUser).push(message)
            if (message.fromUser != that.selectedUser.userId) {
              that.friendListMap.get(message.fromUser).unreadNum += 1;
            }
            that.$forceUpdate()
            http.post("/message/addMessage", message)

          }
          if (object.type == 2) {
            for (let i = 0; i < that.groupChatList.length; i++) {
              if (that.groupChatList[i].eid == object.groupId) {
                let mes = {
                  msg: object.msg,
                  fromUser: object.id,
                  date: new Date(),
                  groupEid: object.groupId
                }
                that.groupChatList[i].messages.push(mes)
                break;
              }
            }
            that.$forceUpdate()
          }
        }
        //连接关闭的回调方法
        this.websocket.onclose = function () {
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
          this.websocket.close()
        }
      },
      // 发送消息
      sendMessage: function (type) {
        if(this.messageValue==''){
          this.$message.warning("请输入消息")
          return;
        }
        if (type == 1) {
          var socketMsg = {fromUser: this.currentUser, msg: this.messageValue, toUser: this.selectedUser}
          this.friendMessageMap.get(this.selectedUser.userId).push({
            fromUser: this.currentUser.userId,
            msg: this.messageValue,
            toUser: this.selectedUser.userId,
            date: new Date()
          })

          this.$forceUpdate()
          // if (this.aisle == "") {
          //   //群聊.
          //   socketMsg.type = 0;
          // } else {
          //单聊.
          socketMsg.type = 1
          // }
          this.websocket.send(JSON.stringify(socketMsg))
          this.messageValue = '';
        } else if (type == 0) {
          var socketMsg = {fromUser: this.currentUser, msg: this.messageValue, groupId: this.selectedGroup.eid, type: 0}
          this.websocket.send(JSON.stringify(socketMsg))
          this.messageValue = '';
        }
      },
      showInfo: function (people, aisle) {
        this.$notify({
          title: '当前在线人数：' + people,
          message: '您的频道号：' + aisle,
          duration: 0
        })
      },
      getName (userId) {
        return this.friendListMap.get(userId).userName
      },
      getUserInGroup(userList,userId){
        for(let i=0;i<userList.length;i++){
          if(userList[i].userId == userId){
            return userList[i];
          }
        }
      },
      changeSelect (operate) {
        this.clickIcon = operate
        this.selectedUser = {}
        this.selectedGroup = {}
        this.$forceUpdate()
        if (operate == 'groupChat') {
          this.getAllGroup()
        }
        if(operate =='chat_info'){
          this.getAllReqRecord();
        }
        if(operate=='contact'){
          this.getFriends();
        }
      },
      //查询当前用户所在的群
      getAllGroup () {
        http.get("/groupChat/getGroup", {
          userId: this.currentUser.userId
        }).then((response) => {
          this.groupChatList = response.data
        })
      },
      selectGroup (group) {
        this.selectedGroup = group
        this.selectedUser = {}
        this.$forceUpdate()
      },
      createGroup () {
        if(this.createGroupChatName==''){
          this.$message.warning("请输入群聊名再创建")
          return
        }
        let users=''
        for(let i = 0; i<this.checkedUsers.length; i++){
          users+=this.checkedUsers[i]+":"
        }
        let createGroupDto={
          users:this.checkedUsers,
          createGroupName:this.createGroupChatName,
          lord:this.currentUser.userId
        }
        users=users.substring(0,users.length-1)
        http.post('groupChat/createGroup',createGroupDto).then((res) => {
          if(res.data.code==200){
            this.$message.success(res.data.message)
            this.addUserDialog=false
            this.checkedUsers={}
            this.createGroupName="";
            if(this.clickIcon=='groupChat'){
              this.getAllGroup()
            }
          }else {
            this.$message.error(res.data.message)
          }
        })
      },
      inviteFriendsGroups(){
        let fd = new FormData();
        fd.append("userIdList",this.inviteFriendsList);
        fd.append("groupId",this.selectedGroup.eid);
        fd.append('currentUserId',this.currentUser.userId);
        fd.append('groupName',this.selectedGroup.groupName);
        http.post("groupChat/inviteFriends",fd).then((res)=>{
          if(res.data.code==200){
            this.$message.success(res.data.message)
            this.inviteFriendsDialog=false
            if(this.clickIcon=='groupChat'){
              this.getAllGroup()
            }
          }else {
            this.$message.error(res.data.message)
          }
        })
      },
      isInGroup(user,userList){
        for (let i=0;i<userList.length;i++){
          if(userList[i].userId==user.userId){
            return true
          }
        }
        return false
      },
      getAllReqRecord(){
        http.get("user/getReqRecordById", {
          userId:this.currentUser.userId
        }).then((res)=>{
          this.reqRecordList=res.data;
          this.$forceUpdate()
        })
      },
      handelRequest(type,reqRecord){
        if(type=='agree'){
          reqRecord.status='已同意'
        }else{
          reqRecord.status='已拒绝'
        }
        http.post('user/handleReqRecord',reqRecord).then((res)=>{
          this.getAllReqRecord();
          if(res.data.code==200){
            this.$message.success(res.data.message);
          }else{
            this.$message.error(res.data.message);
          }
        })

      },
      addFriend(){
        if(this.searchInfo==""){
          this.$message.warning("你未输入好友ID")
          return
        }
        http.get('user/addFriend',{
          userId:this.currentUser.userId,
          friendId:this.searchInfo,
        }).then((res)=>{
          if(res.data.code==200){
            this.$message.success(res.data.message);
          }else if(res.data.code==400){
            this.$message.warning(res.data.message);
          }else{
            this.$message.error(res.data.message);
          }
          this.searchInfo='';
        })
      },
      handleBeforeUpload (file) {
        if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
          this.$message({
            type:'warning',
            message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
          })
        }
        let size = file.size / 1024 / 1024 / 2
        if (size > 2) {
          this.$message({
            type:'warning',
            message: '图片大小必须小于2M'
          })
        }
        // this.file=file;
      },
      handleChange(file,fileList){
        this.file=fileList[fileList.length-1];
        //此处预览照片
        this.headerPic=URL.createObjectURL(this.file.raw);
      },
      uploadFile(){
        let fd = new FormData();//通过form数据格式来传
        let userId=this.currentUser.userId;
        fd.append("file", this.file.raw); //传文件
        fd.append('userId',userId)
        this.dialogVisible = true;
        http.upload('/up/uploadHead',fd,{
          'Content-Type': 'multipart/form-data'
        }).then((res)=>{
          http.get('user/getUserById',{
            userId:userId
          }).then((res) => {
            this.$store.commit('SET_USER', res.data);
            this.currentUser=res.data;
            this.headerPic=this.$store.getters.getAvatarBaseUrl+this.currentUser.avatarPath;
          })
        })

      },
      handleAvatarSuccess(res, file) {
        this.headerPic = URL.createObjectURL(file.raw);
      },
    }
  }
</script>

<style scoped>

  #userList li {
    background-color: white;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: black;
    margin-bottom: 2px;
  }

  body {
    background-color: #ebebeb;
    font-family: -apple-system;
    font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
  }

  .chat-sender {
    clear: both;
    font-size: 80%;
    float: left;
  }

  .chat-sender div:nth-of-type(1) {
    float: left;
  }

  .chat-sender div:nth-of-type(2) {
    margin: 0 50px 2px 50px;
    padding: 0px;
    color: #848484;
    font-size: 70%;
    text-align: left;
  }

  .chat-sender div:nth-of-type(3) {
    background-color: white;
    /*float: left;*/
    margin: 0 50px 10px 50px;
    padding: 10px 10px 10px 10px;
    border-radius: 7px;
    text-indent: -12px;
  }

  .chat-receiver {
    clear: both;
    font-size: 80%;
    float: right;
  }

  .chat-receiver div:nth-of-type(1) {
    float: right;
  }

  .chat-receiver div:nth-of-type(2) {
    margin: 0px 50px 2px 50px;
    padding: 0px;
    color: #848484;
    font-size: 70%;
    text-align: right;
  }

  .chat-receiver div:nth-of-type(3) {
    /*float:right;*/
    background-color: #b2e281;
    margin: 0px 50px 10px 50px;
    padding: 10px 10px 10px 10px;
    border-radius: 7px;
  }

  .chat-receiver div:first-child img,
  .chat-sender div:first-child img {
    width: 40px;
    height: 40px;
    /*border-radius: 10%;*/
  }

  .chat-left_triangle {
    height: 0px;
    width: 0px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent white transparent transparent;
    position: relative;
    left: -22px;
    top: 3px;
  }

  .chat-right_triangle {
    height: 0px;
    width: 0px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #b2e281;
    position: relative;
    right: -22px;
    top: 3px;
  }

  .chat-notice {
    clear: both;
    font-size: 70%;
    color: white;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .chat-notice span {
    background-color: #cecece;
    line-height: 25px;
    border-radius: 5px;
    padding: 5px 10px;
  }

</style>
<style>
  .chatBox_header{
    width: 180px;
    height: 30px;
  }
  .chatBox_header  .el-input__inner {
    width: 140px!important;
    height: 30px!important;
  }
  .chatBox_header .el-input__prefix{
    top:-5px!important;
  }
  #changeInfo .el-date-editor{
    width: 100%!important;
  }
  .active{
    background-color: #dbdbda!important;
  }
</style>
<!-- -->
